<template>
  <div class="personnelList agent-box">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-caiwu fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>代理商管理</el-breadcrumb-item>
      <el-breadcrumb-item>人员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow mt_15">
      <div class="tableMaxBox">
        <div class="py_5 px_10">
          <el-row>
            <el-col :span="2">
              <el-button
                type="success"
                class="fl"
                @click="addAdmin()"
                round
                size="mini"
                >新增用户</el-button
              >
            </el-col>
            <el-col :span="22">
              <el-form
                :inline="true"
                class="form-inline fr"
                @keyup.enter.native="shearchBtn()"
              >
                <el-form-item class="w_160">
                  <el-input
                    v-model="query.username"
                    placeholder="账号"
                  ></el-input>
                </el-form-item>
                <el-form-item class="w_160">
                  <el-input
                    v-model="query.nickname"
                    placeholder="姓名"
                  ></el-input>
                </el-form-item>
                <el-form-item class="w_160">
                  <el-input
                    v-model="query.mobile"
                    placeholder="手机号"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-select
                    size="mini"
                    class="w_150"
                    v-model="query.role_id"
                    placeholder="角色"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in roleList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-button
                  size="mini"
                  type="primary"
                  native-type="button"
                  class="round-right"
                  @click="shearchBtn"
                  >搜索</el-button
                >
                <el-button size="mini" round @click="resetBtn">重置</el-button>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <template>
          <el-table :data="list" stripe>
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="username"
              label="登录账号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="nickname"
              label="姓名"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="agent_name"
              label="代理商"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="role_name"
              label="角色"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="email"
              label="Email"
              width="170"
            ></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="{ row }">
                <span class="text-green" v-if="row.status == 1">启用</span>
                <span class="text-red" v-else-if="row.status == 2">停用</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="last_login"
              label="最后登录时间"
              width="170"
            ></el-table-column>
            <el-table-column
              prop="ip"
              label="最后登录IP"
              width="120"
            ></el-table-column>
            <el-table-column label="操作" width="250px" fixed="right">
              <template slot-scope="{ row }">
                <el-link
                  type="info"
                  class="InfoFont"
                  :underline="false"
                  @click="addAdmin(row)"
                  >编辑</el-link
                >
                <el-link
                  type="warning"
                  class="InfoFont"
                  :underline="false"
                  @click="redactPasswordBtn(row)"
                  >重置密码</el-link
                >
                <el-link
                  type="danger"
                  class="InfoFont"
                  :underline="false"
                  v-if="row.status == 1"
                  @click="onOff(row)"
                  >停用</el-link
                >
                <el-link
                  type="success"
                  class="InfoFont"
                  :underline="false"
                  v-if="row.status == 2"
                  @click="onOff(row)"
                  >启用</el-link
                >
                <el-link
                  type="primary"
                  class="InfoFont"
                  :underline="false"
                  @click="getQr(row)"
                  >公众号二维码</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <page
            :total="total"
            :pageNums="pageNum"
            :disableMountedFetch="true"
            @pagedata="onChildValue"
          ></page>
        </template>
      </div>
    </div>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="passwordShow"
      width="560px"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row-info clear">
          <div class="fl title-key">
            <span>登录账号：</span>
          </div>
          <div class="fl list-cont">
            <span>{{ checkedUser.username }}</span>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>
            <span>登录密码：</span>
          </div>
          <div class="fl list-cont">
            <el-input
              v-model="checkedUser.password"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>
            <span>再次确认密码：</span>
          </div>
          <div class="fl list-cont">
            <el-input
              v-model="checkedUser.password1"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="redactPwdSubmit">确 定</span>
        <span class="resetBtn" @click="close">取 消</span>
      </div>
    </el-dialog>
    <!--二维码-->
    <el-dialog
      title="二维码"
      :visible.sync="showQRCode"
      width="450px"
      @close="qrcode_url = ''"
    >
      <h4 style="text-align: center">{{ qrcode_name }}</h4>
      <img
        :src="qrcode_url"
        style="margin: 0 auto; display: block; width: 300px"
      />
      <p style="font-size: 12px">
        通过该二维码关注公众号的人才登录小程序，会将人才来源标记为该人员
      </p>
    </el-dialog>
  </div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchListRole, agentListUser, agentUserOperate, agentUpPassword, agentQrCode } from '@/api/agent.js'
export default {
  name: 'agent-box',
  data() {
    return {
      manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
      url: common.url,
      head_url: common.head_url,
      passwordShow: false,
      query: {
        username: '',
        nickname: '',
        mobile: '',
        role_id: '',
        type: 2
      },

      list: [], //列表角色
      roleList: [], //代理商列表

      //向分页组件传值
      total: 0,
      pageNum: 1,
      pageSizeNow: 20,

      //修改密码
      checkedUser: {
        id: '',
        username: '',
        password: '',
        password1: ''
      },

      //二维码
      qrcode_url: '',
      qrcode_name: '',
      showQRCode: false
    }
  },
  created() {
    if (this.$route.query.role_id) {
      this.query.role_id = +this.$route.query.role_id
    }
  },
  mounted() {
    this.getRoleList()
    this.getList()
  },
  methods: {
    // 获取代理商列表
    async getRoleList() {
      try {
        let ret = await fetchListRole({
          type: 2,
          status: 1
        })
        this.roleList = ret.list.map(it => {
          return {
            id: it.id,
            name: it.name
          }
        })
        console.log(this.roleList)
      } catch (err) {
        console.log('err:', err)
      }
    },

    async getList() {
      try {
        let ret = await agentListUser({
          ...this.query,
          page: this.pageNum,
          pageSize: this.pageSizeNow
        })
        console.log(ret)
        this.list = ret.list
        this.total = ret.count
      } catch (err) { }
    },

    addAdmin(row) {
      if (row) {
        this.$router.push({
          path: '/agentadminadd',
          query: {
            id: row.user_id
          }
        })
      } else {
        this.$router.push('/agentadminadd')
      }
    },

    async onOff(row) {
      console.log(row)
      try {
        let ret = await this.$confirm(
          `${+row.status === 1 ? '停用管理人员，将无法登录系统！' : '确定要启用管理人员吗？'}`,
          '温馨提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        if (ret === 'cancel') return
        // return
        await agentUserOperate({
          id: row.user_id,
          status: +row.status === 1 ? 2 : 1
        })
        this.$message.success('操作成功')
        this.getList()
      } catch (err) {
        console.log(err)
      }
    },

    async getQr(row) {
      try {
        let res = await agentQrCode({
          user_id: row.user_id,
          nickname: row.nickname
        })
        this.qrcode_url = res
        this.qrcode_name = row.nickname
        this.showQRCode = true
      } catch (err) { }
    },

    // 修改密码
    redactPasswordBtn(row) {
      this.checkedUser.id = row.user_id
      this.checkedUser.username = row.username
      this.passwordShow = true
    },

    close() {
      //关闭弹框
      this.passwordShow = false
      for (let key in this.checkedUser) {
        this.checkedUser[key] = ''
      }
    },

    async redactPwdSubmit() {
      try {
        const { password, password1, id } = this.checkedUser
        if (password == '' || password1 == '') {
          this.$message.error('请输入密码！')
          return
        }
        if (password !== password1) {
          this.$message.error('两次密码输入不一致！')
          return
        }
        await agentUpPassword({ id, password })
        this.$message.success('修改成功！')
        this.close()
        this.getList() //获取管理员列表
      } catch (err) {
        console.log(err)
      }
    },

    //分页组件->子组件传值
    onChildValue(item) {
      this.pageNum = item[0]
      this.pageSizeNow = item[1]
      this.getList()
    },

    //重置
    async resetBtn() {
      this.resetData()
      this.getList()
    },
    //重置请求数据
    resetData() {
      this.pageNum = 1
      for (let key in this.query) {
        this.query[key] = ''
      }
      this.query.type = 2
    },

    shearchBtn() {
      this.pageNum = 1
      this.getList()
    }
  },
  filters: {}
}
</script>

<style scoped>
.row-info {
  margin-bottom: 10px;
}
.row-info .title-key {
  width: 120px;
}
.row-info .list-cont {
  width: 260px;
}
</style>



// WEBPACK FOOTER //
// src/components/agent/AdminList.vue